<template>
	<view>
		<view class="title">XX贷</view>
		<view class="head">
			<view class="listen">
				<image src="../static/images/listen.jpg" mode=""></image>
			</view>
			<input type="text" placeholder="关于信贷信息提示" />
		</view>
		<view class="body">
			<view class="lend">可借额度（元）</view>
			<view class="money">
				<view>2000.00</view>
				<view class="go">去借钱</view>
			</view>
			<view class="total">总额度7000元 年化利率（单利息）7.2%</view>
		</view>
		<view class="atonce">
			<view class="two">2分钟提额度，最高可提5万</view>
			<view class="btn">立即提额</view>
		</view>
		<view class="photo">
			<image src="../static/images/8a0321436ad0a91a9035d620b42e27c_03.jpg" mode=""></image>
		</view>
		<view class="introduce">
			<image src="../static/images/chanpinjieshao_03.jpg" />
		</view>
		<view class="foot">
			<view class="left">
				<image src="../static/images/foot1_03.jpg" mode=""></image>
			</view>
			<view class="right">
				<view>
					<image src="../static/images/foo2_03.jpg" mode=""></image>
				</view>
				<view class="bottom">
					<image src="../static/images/foo2_03.jpg" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>
<style lang="less">
	page{
		background-color: #eef2fc;
	}
	.title{
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 25rpx;
	}
	.head{
		margin-left: 30rpx;
		margin-right: 80rpx;
		background-color: #fff;
		border-radius: 35rpx;
		display: flex;
		margin-bottom: 45rpx;
		.listen{
			image{
				width: 28rpx;
				height: 28rpx;
				margin-left: 20rpx;
				margin-top: 22rpx;
			}
		}
		input{
			font-size: 20rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			margin-left: 12rpx;
		}
	}
	.body{
		background-color: #174ace;
		margin-left: 30rpx;
		margin-right: 80rpx;
		border-radius: 20rpx;
		.lend{
			font-size: 26rpx;
			padding-top: 70rpx;
			margin-left: 60rpx;
			color: #fff;
		}
		.money{
			display: flex;
			margin-left: 60rpx;
			margin-top: 40rpx;
			font-size: 46rpx;
			color: #fff;
			justify-content: space-between;
			.go{
				margin-right: 60rpx;
				font-size: 28rpx;
				color: #174ace;
				background: #fff;
				border-radius: 25rpx;
				padding-left: 15rpx;
				padding-right: 15rpx;
				padding-top: 15rpx;
				font-weight: bold;
			}
		}
		.total{
			font-size: 24rpx;
			margin-top: 45rpx;
			margin-left: 60rpx;
			color: #fff;
			padding-bottom: 60rpx;
		}
	}
	.atonce{
		background-color: #cedeff;
		display: flex;
		margin-left: 30rpx;
		margin-right: 80rpx;
		color: #04048d;
		padding-bottom: 30rpx;
		border-radius: 25rpx;
		padding-top: 40rpx;
		.two{
			margin-left: 34rpx;
			font-size: 24rpx;
		}
		.btn{
			background-color: #04048d;
			color: #fff;
			font-size: 24rpx;
			margin-left: 100rpx;
			padding: 15rpx;
			border-radius: 35rpx;
			
		}
	}
	.photo image{
		margin-left: 30rpx;;
		height: 185rpx;
		margin-top: 45rpx;
		margin-bottom: 45rpx;
	}
	.introduce image{
		margin-left: 30rpx;
		height: 70rpx;
	}
	.foot{
		margin-left: 30rpx;
		display: flex;
		.bottom{
			margin-top: 35rpx;
		}
		.left{
				image{
					height: 455rpx;
					width: 325rpx;
				}
		}
		.right{
			image{
				width: 313rpx;
				height: 200rpx;
			}
		}
	}
	
</style>